<template>
	<div class="allcontent">
		<div class="search">
			<el-form  size="small"  @submit.native.prevent ref="queryRef" :model="searchParam">
				<el-row gutter="10">
					<el-col span="8">
						<el-form-item prop="operName">
							<el-input  @keyup.enter.native="search" 
							placeholder="请输入操作名称模糊搜索" autofocus v-model="searchParam.operName"></el-input>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="operType">
							<el-input  @keyup.enter.native="search" 
							placeholder="请输入操作类型模糊搜索" autofocus v-model="searchParam.operType"></el-input>
						</el-form-item>
					</el-col>
					<el-col  span="8">
						<el-button  plain icon="Search"  type="primary" @click="search">搜索</el-button>
					</el-col>
					<el-col  span="8">
						<el-button  plain icon="Refresh"  type="warning" @click="reset(queryRef)">重置</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="el-table">
			<el-table ref="tableRef"  :data="tableData" style="width: 100%;font-size: 13px;"  v-loading="loading" @selection-change="handleSelectionChange">
				<el-table-column width="55" ></el-table-column>
			    <el-table-column prop="moduleName" label="模块名称"/>
				<el-table-column prop="operation" label="操作类型">
				</el-table-column>
				<el-table-column prop="methodName" label="方法名">
				</el-table-column>
				<el-table-column prop="className" label="类名"/>
				<el-table-column prop="logDesc" label="日志描述" show-overflow-tooltip="true" width="200"/>
				<el-table-column prop="createTime" label="操作时间">
					<template #default="scope">
						{{formatTimestamp(scope.row.createTime)}}
					</template>
				</el-table-column>
				<el-table-column prop="createBy" label="创建人"/>
			</el-table>
		</div>
		<div class="el-pager">
		   <el-pagination layout="total,sizes,prev, pager, next,jumper" :total="total" 
		   :page-sizes="[10,20,30,40,50]" :pager-count="11"
		   size="small"  background  class="mt-4" :current-page="currentPage" 
		   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {ref,reactive,onMounted} from 'vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import {ElMessage,ElTable} from 'element-plus'
	import {page,info} from '@/api/operlog.ts'
	import {formatTimestamp} from '@/utils/date.ts'

	const searchParam =reactive({
		operName:null,
		operType:null,
		page:1,
		limit:10,
	})
	const search=()=>{
		loadData();
	}
	const queryRef=ref<FormInstance>();
	const reset = (formEl: FormInstance | undefined) => {
		  if (!formEl) return
		  formEl.resetFields()
		  loadData();
	}
	
	const tableData = ref([]);
	const total = ref(0);
	const loading=ref(false);
	const loadData =()=>{
		loading.value=true;
		page(searchParam).then((res)=>{
			if(res.code === 200){
				tableData.value = res.data.list;
				total.value = res.data.total;
			}
			loading.value=false;
		})
	}
	onMounted(()=>{
		loadData();
	})
	const currentPage = ref(1)
	const handleSizeChange = (val: number) => {
	  searchParam.limit= val;
	  loadData();
	}
	const handleCurrentChange = (val: number) => {
	  currentPage.value= val;
	  searchParam.page= val;
	  loadData();
	}
	const tableRef=ref<InstanceType<typeof ElTable>>()
</script>

<style scoped>
	.search{
		margin-bottom: 10px;
	}
  .el-pager{
    padding: 1%;
    justify-content: right;
    /*		align-items: right;
        position: absolute;
        bottom:0;
        right:0;
        margin-bottom:5px;*/
  }
	.allcontent{
		height: 65vh;
		position: relative;
	}
	.el-table{
		max-height:70%;
		overflow: auto;
	}
	.el-table::-webkit-scrollbar{
		display: none;
	}
</style>